<template>
  <div class="flex items-center m-auto w bg-[#fff] rounded-[4px]">
    <div>
      <div
        class="w-[240px] h-[44px] bg-[--main-color] text-[#fff] pl-[15px] flex items-center relative cat-wrapper"
        @mouseleave="handleMouseLeave"
      >
        <img src="/images/category.png" />
        <span class="font-[700] text-[16px] ml-[9px]">
          {{ $t("common.商品类别") }}
        </span>
        <div class="header-category">
          <n-scrollbar style="max-height: 622px">
            <div class="p" v-for="p in category" @mouseenter="handleMouseEnter(p)">
              <a :href="`/#/search/${p.esName}`">
                <div class="title">
                  {{ p.esName }}
                </div>
              </a>
            </div>
          </n-scrollbar>
          <div v-show="currentP.children" class="level-one-list">
            <n-scrollbar style="max-height: 622px">
              <div class="level-two-list-wrapper">
                <div class="level-two-list" v-for="t in currentP.children" :key="t">
                  <a :href="`/#/search/${t.esName}`">
                    <div class="text-[--main-color] text-[16px] font-[700]">
                      {{ t.esName }}
                    </div>
                  </a>
                  <div class="pl-4">
                    <a :href="`/#/search/${c.esName}`" v-for="c in t.children" :key="c">
                      <div class="mt-[8px] text-[#303030] font-light">
                        {{ c.esName }}
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </n-scrollbar>
          </div>
        </div>

        <!-- <div class="header-category">
          <div class="p" v-for="p in category">
            <a :href="`/#/search/${p.esName}`">
              <div class="title">
                {{ p.esName }}
              </div>
            </a>
            <div class="level-one-list">
              <div class="level-two-list-wrapper">
                <div class="level-two-list" v-for="t in p.children" :key="t">
                  <a :href="`/#/search/${t.esName}`">
                    <div class="text-[--main-color] text-[16px] font-[700]">
                      {{ t.esName }}
                    </div>
                  </a>
                  <div class="pl-4">
                    <a :href="`/#/search/${c.esName}`" v-for="c in t.children" :key="c">
                      <div class="mt-[8px] text-[#303030] font-light">
                        {{ c.esName }}
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <div class="flex items-center nav-wrapper">
      <template v-if="navData.length > 0">
        <div v-for="item in navData" :key="item.id" @click="navigateTo(item.link)">
          {{ item.title }}
        </div>
      </template>
      <template v-else>
        <div @click="goArtical('Política de importación')">Política de importación</div>
        <div @click="goArtical('Política de almacenamiento')">
          {{ $t("footer.存储政策") }}
        </div>
        <div @click="goArtical('Política de inspección')">Política de inspección</div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useUser } from "@/stores/user";
import { goArtical } from "@/utils/common";
import { getNavigationList } from "@/api/common";
import { useRouter } from "vue-router";
const { category } = toRefs(useUser());
const { getCategory } = useUser();
const navData = ref([]);
const currentP = ref({});
onMounted(async () => {
  const { data } = await getNavigationList();
  navData.value = data.data;
  await getCategory();
});

const navigateTo = (link) => {
  link = link.startsWith("http") ? link : `/#${link}`;
  window.open(link, "_blank");
};

const handleMouseEnter = (p) => {
  currentP.value = p;
};
const handleMouseLeave = () => {
  currentP.value = {};
};
</script>

<style lang="scss" scoped>
.cat-wrapper {
  &:hover {
    .header-category {
      display: block;
      min-height: 200px;
    }
  }
}
.header-category {
  background-color: #f0eded;
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 1;
  min-width: 240px;
  transition: all 0.5s ease-in-out;
  color: #333;
  display: none;
  border: 1px solid #dcdee3;
  transition: display 0.5s ease-in-out;
  .p {
    .title {
      padding: 10px 26px;
      background-color: #f0eded;
      cursor: pointer;
      color: #333;

      font-size: 16px;
      font-weight: 300;
    }

    &:hover {
      .title {
        box-shadow: -2px 1px 5px #e7e7e7;
        border-radius: 2px;
        border: 1px solid #e7e7e7;
        border-right: 2px solid transparent;
        background-color: var(--main-color);
        z-index: 2;
        position: relative;
        color: #fff;
      }
      .level-one-list {
        display: block;
      }
    }
  }
}
.level-one-list {
  background-color: #fff;
  color: #333;
  min-width: 800px;
  position: absolute;
  left: 239px;
  width: 800px;
  top: 0px;
  // display: none;
  margin-left: 0px;
  box-shadow: 0 1px 5px #e7e7e7;
  padding: 20px;
  height: 623px;
  overflow: auto;
  .level-two-list-wrapper {
    // display: grid;
    // grid-template-columns: repeat(3, 1fr);
    // gap: 10px; /* 根据需要调整网格之间的间距 */
    column-count: 2; /* 分成3列 */
    column-gap: 1em; /* 列之间的间隙 */
  }
  .level-two-list {
    padding-bottom: 8px;
    break-inside: avoid; //防止子元素跨页
    > a > div:first-child::before {
      content: "• "; /* 添加一个圆点作为伪列表标记 */
      padding-right: 5px; /* 添加一些右边距 */
    }
    div {
      cursor: pointer;
      transition: padding-left 0.3s;
      div:hover {
        color: var(--main-color);
        padding-left: 10px;
      }
    }
  }
}
.nav-wrapper {
  > div {
    cursor: pointer;
    font-size: 16px;
    color: #333;
    // width: 155px;
    padding: 0 20px;
    height: 17px;
    // border-right: 1px solid #dfdfdf;
    text-align: center;
    line-height: 17px;
    font-weight: 300;
    &:hover {
      color: var(--main-color);
    }
  }
  > div:last-child {
    border-right: 0;
  }
}
</style>
